<!--
 * Description: 成本模型配置模块
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/09/27 11:13
-->

<template>
  <div v-loading="isRequesting" class="model-config">
    <div class="show-area">
      <div class="left">
        <el-scrollbar>
          <div class="query-input">
            <el-input
              v-model="queryInput"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
            ></el-input>
          </div>
          <div class="placeholder"></div>
          <div
            v-for="item in optionListFilter"
            :key="item.id"
            class="option-item"
            :class="{ select: selectOption.configName === item.configName }"
            @click="handlerSelectOption(item)"
          >
            <span>{{ item.configName }}</span>
          </div>
        </el-scrollbar>
      </div>
      <div class="right">
        <ModelConfigDetail
          v-if="selectOption && optionListFilter.length > 0"
          :detailData="selectOption"
          :tableList="detailDataList"
          @save="afterSave"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { modelConfigList } from '@/api/model/config'
import { modelExtraConfigList } from '@/api/model/extra-config'

import ModelConfigDetail from './components/ModelConfigDetail'
export default {
  name: 'PkgModelConfig',
  components: { ModelConfigDetail },
  data() {
    return {
      isRequesting: false,

      queryInput: '',

      optionList: [],

      selectOption: '',

      detailDataList: []
    }
  },

  computed: {
    optionListFilter() {
      if (this.queryInput) {
        return this.optionList.filter(
          item => item.configName.toUpperCase().indexOf(this.queryInput.toUpperCase()) > -1
        )
      } else {
        return this.optionList
      }
    }
  },

  created() {
    this.pageDataInit()

    /** 复杂数据 */
    this.$bus.$on('cbom-load-detail-list', async configKey => {
      this.handlerViewDetailList(configKey)
    })
  },

  beforeDestroy() {
    /** 复杂数据 */
    this.$bus.$off('cbom-load-detail-list')
  },

  methods: {
    afterSave() {
      this.pageDataInit()
    },

    handlerSelectOption(item) {
      this.selectOption = item
      if (item.configType === 1) {
        this.handlerViewDetailList(item.configKey)
      }
    },

    // 复杂数据详情列表
    async handlerViewDetailList(configKey) {
      try {
        this.isRequesting = true
        const result = await modelExtraConfigList({
          configKey: configKey
        })
        this.detailDataList = this.$deepCopy(result.data)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    /* 页面数据初始化*/
    pageDataInit() {
      this.$store.dispatch('commodity/initCommodityCollectsLazy')
      this.query()
    },

    async query() {
      try {
        this.isRequesting = true
        const res = await modelConfigList({
          gcmFunction: 'PKG'
        })
        this.optionList = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.model-config {
  height: 100%;
  position: relative;
  text-align: left;
}

.show-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 10px;
  border: 1px solid #dcdfe6;
  > .left {
    width: 280px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0 5px;
    border-right: 1px solid #dcdfe6;
    .query-input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 0 5px;
      padding-top: 10px;
      /deep/ .el-input__inner {
        border-radius: 20px !important;
      }
    }
    .placeholder {
      height: 70px;
    }
    .option-item {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      color: #000;
      font-size: 20px;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 3px;
    }
    .option-item:hover {
      background-color: #f5f7fa;
    }

    .option-item.select {
      border-color: #409eff;
    }
  }
  > .right {
    position: absolute;
    left: 280px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
  }
}

.el-scrollbar {
  height: 100%;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
